import "../lib/jquery.js";
import axios from "../lib/axios.js";

$(function () {
  var maxPage = 0;
  const query = {
    current: 1,
    pagesize: 12,
    filter: "",
    saleType: 10,
    sortType: "",
    sortMethod: "",
    search: "",
  };

  function hanldePage() {
    if (query.current === 1) {
      $(".first").addClass("disable");
      $(".prev").addClass("disable");
    }
    if (query.current === maxPage) {
      $(".next").addClass("disable");
      $(".last").addClass("disable");
    }

    if (query.current > 1) {
      $(".first").removeClass("disable");
      $(".prev").removeClass("disable");
    }

    if (query.current < maxPage) {
      $(".next").removeClass("disable");
      $(".last").removeClass("disable");
    }
  }
  // 获取商品列表方法
  function getList() {
    hanldePage();

    axios
      .get("http://localhost:9000/goods/list", {
        params: query,
      })
      .then(({ data }) => {
        if (data.code === 1) {
          maxPage = data.total;
          $(".total").text(`${query.current} / ${maxPage}`);

          var list = $("ul.list");

          list.empty();

          if (data.list.length > 0) {
            $.each(data.list, function (index, item) {
              $(`<li data-id="${item.goods_id}">
                  <div class="show">
                    <img src="${item.img_big_logo}">
                    ${item.is_hot ? `<span class="hot">热销</span>` : ""} 
                    ${item.is_sale ? `<span>折扣</span>` : ""} 
                  </div>
                  <div class="info">
                    <p class="title">${item.title}</p>
                    <p class="price">
                      <span class="curr">¥ ${item.current_price}</span>
                      <span class="old">¥ ${item.price}</span>
                    </p>
                  </div>
                </li>`).appendTo(list);
            });

            $("ul.list li").click(function () {
              localStorage.setItem("goodId", $(this).data("id"));
              location.href = "detail.html";
            });
          } else {
            $(`<img src="../img/no.png">`).appendTo(list);
          }
        }
      });
  }

  getList();

  axios.get("http://localhost:9000/goods/category").then(({ data }) => {
    if (data.code === 1) {
      var categoryList = $("ul.category");

      $.each(data.list, function (index, item) {
        $("<li>", {
          text: item,
        }).appendTo(categoryList); // 将li元素追加到列表容器中
      });

      $("ul.category li").click(function () {
        $(this).siblings().removeClass("active");
        $(this).addClass("active");

        var text = $(this).text();
        query.category = text === "全部" ? "" : text;

        query.current = 1;
        getList();
      });
    }
  });

  // 上一页
  $(".prev").click(function () {
    if (query.current === 1) return;
    query.current -= 1;
    getList();
  });

  // 首页
  $(".first").click(function () {
    if (query.current === 1) return;
    query.current = 1;
    getList();
  });
  // 首页
  $(".last").click(function () {
    if (query.current === maxPage) return;
    query.current = maxPage;
    getList();
  });
  // 下一页
  $(".next").click(function () {
    if (query.current === maxPage) return;
    query.current += 1;

    getList();
  });
  // 下一页
  $(".go").click(function () {
    var val = parseInt($(".jump").val());

    if (val > maxPage) {
      alert(`最大跳转至${maxPage}页`);
      return;
    }

    query.current = val;

    getList();
  });

  $(".pagesize").change(function () {
    var val = $(this).val();

    query.pagesize = val;
    query.current = 1;

    getList();
  });

  $("ul.filterBox.typeBox li").click(function () {
    var type = $(this).data("type");

    if (type === "") {
      query.filter = "";
      query.saleType = 10;
      $(this).addClass("active");
      $(this).siblings().removeClass("active");
      $($(".saleBox li").get(0)).addClass("active");
      $($(".saleBox li").get(0)).siblings().removeClass("active");
    } else {
      var all = $("ul.filterBox.typeBox li").first();

      let index = query.filter.indexOf(type);
      if (index === -1) {
        query.filter += query.filter.length > 0 ? "," + type : type;
        $(this).addClass("active");
      } else {
        query.filter = query.filter.replace(type, "").replace(",", "");
        $(this).removeClass("active");
      }
      if (query.filter === "") {
        all.addClass("active");
      } else {
        all.removeClass("active");
      }
    }

    getList();
  });

  $("ul.filterBox.saleBox li").click(function () {
    var saleType = $(this).data("type");

    $(this).addClass("active");
    $(this).siblings().removeClass("active");

    var saleLi = $($("ul.filterBox.typeBox li").get(2));
    saleLi.addClass("active");
    saleLi.siblings().removeClass("active");
    query.filter = "sale";

    query.saleType = saleType;
    getList();
  });

  $("ul.filterBox.sortBox li").click(function () {
    var sortType = $(this).data("type"),
      sortMethod = $(this).data("method");

    $(this).addClass("active");
    $(this).siblings().removeClass("active");

    query.sortType = sortType;
    query.sortMethod = sortMethod;

    getList();
  });

  $(".search").change(function () {
    query.search = $(this).val();

    getList();
  });
});
